<template>
  <div>
        <h2>此页面为开发人员测试页,您可不予理会</h2>
         <el-table
               border
      :data="goodsList"
      style="width: 100%"
      height='450px'>
      <el-table-column
        type="index"
        label='#'
        >
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称"
        width='400px'
        >
      </el-table-column>
      <el-table-column
        prop="goods_price"
        label="商品价格"
        >
      </el-table-column>
      <el-table-column
        prop="goods_weight"
        label="商品重量"
        >
      </el-table-column>

               <el-table-column
               class="create-time"
        label="创建时间"
        width='200px'
        >
        <template #default='{row}'>
              {{row.add_time | tansformDate}}
        </template>
      </el-table-column>
    
      <el-table-column       
        label="操作">
         <template #default="{row}">
            <!-- 修改按钮 -->
            <el-button  type="primary" icon="el-icon-edit" size="mini" @click="showEditDia(row)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button  type="danger" icon="el-icon-delete" size="mini"  @click="deleteGoods(row)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,8,10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 编辑对话框 -->
     <el-dialog

  title="编辑商品"
  :visible.sync="showEditDialogVisible"
  width="50%"
    >
 <el-form :model="editForm" ref="editForm" label-width="100px" :rules='editFromRules'>
  <el-form-item
    label="商品名称"
    prop="goods_name"
  >
    <el-input type="textarea" v-model="editForm.goods_name" autosize></el-input>
  </el-form-item>
   <el-form-item
    label="商品价格"
    prop="goods_price"
  >
    <el-input type="text" v-model="editForm.goods_price"></el-input>
  </el-form-item>
   <el-form-item
    label="商品数量"
    prop="goods_number"
  >
    <el-input type="text" v-model="editForm.goods_number"></el-input>
  </el-form-item>
   <el-form-item
    label="商品重量"
    prop="goods_weight"
  >
    <el-input type="text" v-model="editForm.goods_weight"></el-input>
  </el-form-item>
   <el-form-item
    label="商品介绍"
    prop="goods_introduce"
  >
    <el-input type="text" v-model="editForm.goods_introduce" placeholder='选填'></el-input>
  </el-form-item>
   <el-form-item
    label="商品图片"
    prop="pics"
  >
    <el-input type="text" v-model="editForm.pics"></el-input>
  </el-form-item>
   <el-form-item
    label="商品属性"
    prop="goods_name"
  >
    <el-input type="text" v-model="editForm.attrs" placeholder='选填'></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showEditDialogVisible = false">取 消</el-button>
    <!-- 提交添加的属性 -->
    <el-button type="primary" @click="submitEdit">确 定</el-button>
  </span>
</el-dialog>
<!-- 添加对话框 -->
  </div>
</template>

<script>
import {getGoodsListByAxios,deleteGoodsByAxios,searchByIdByAxios,editGoodsByAxios, addGoodsByAxios} from 'network/axios.js'
export default {
            name:'GoodsListTable',
            props:{
              showAddDialogVisible:{
                type:Boolean,
                default:false
              }
            },
            data(){
                return {
                    //页码信息,包含当前页码数,和当前页码显示数量
                    pageinfo:{
                        query:'',
                        pagenum:1,
                        pagesize:10
                    },
                    //商品列表
                    goodsList:[],
                    //当前页
                    currentPage:1,
                    //商品总数
                    total:900,
                    //编辑表单的相关属性
                    editForm:{
                      goods_name:'',
                      goods_price:'',
                      goods_number:'',
                      goods_weight:'',
                      goods_introduce:'',
                      pics:'',
                      attrs:''
                    },
                  
                    //编辑对话框的显示与隐藏
                    showEditDialogVisible:false,
      
                    
                    //商品id发送网络请求时候要用到,单独给一个
                    goods_id:'',
                  //验证规则
                  editFromRules:{
                        goods_name:[
                          {required:true,message:'商品名不能为空',trigger:'blur'}
                        ],                 
                      goods_price:[
                        {required:true,message:'商品价格不能为空',trigger:'blur'}
                      ],
                      goods_number:[
                        {required:true,message:'商品数量不能为空',trigger:'blur'}
                      ],
                      goods_weight:[
                        {required:true,message:'商品重量不能为空',trigger:'blur'}
                      ]
                      
                    
                  }
                }
            },
              created(){
                    this.getGoodsList(),
                    this.$bus.$on('searchGoods',(searchStr)=>{
                                this.pageinfo.query=searchStr
                                console.log(this.pageinfo.query);
                                console.log('dididi');
                                this.getGoodsList()
                                console.log('dididi2');
                    })
            },
            methods:{
                //获取商品列表并渲染
                getGoodsList(){
                 getGoodsListByAxios(this.pageinfo).then(res=>{
                    const {data}=res
                    if(data.meta.status!=200){
                        this.$message.error("获取商品列表失败")
                     
                    }else{
                        this.goodsList=data.data.goods
                        this.total=data.data.total
                    }

                })
                    },
                    //处理几页/几条的改变
                   handleSizeChange(pagesize){
                       this.pageinfo.pagesize=pagesize
                       this.getGoodsList()
                       console.log(this.pageinfo)
                   },
                   //处理当前页码的改变
                handleCurrentChange(pagenum){
                    this.pageinfo.pagenum=pagenum
                    this.getGoodsList()
                },
                //删除商品
                 deleteGoods(row){
              this.$confirm("删除之后不可恢复,确定要此商品吗?", "确认信息", {
        confirmButtonText: "确认删除",
        cancelButtonText: "点错了",
      }).then(() => {
             deleteGoodsByAxios(row.goods_id).then(res=>{
                    if(res.data.meta.status!=200)
                    return this.$message.error('删除失败')
                    this.getGoodsList()
                    this.$message.success('删除成功')
                })
        }).catch(() => {
          this.$message("您取消了删除操作");
        })     
      },
      //点击编辑显示对话框
      showEditDia(row){
        searchByIdByAxios(row.goods_id).then(res=>{
          this.showEditDialogVisible=true
          const {data}=res.data
          this.editForm.goods_name=data.goods_name
          this.editForm.goods_price=data.goods_price
          this.editForm.goods_number=data.goods_number
          this.editForm.goods_weight=data.goods_weight
          this.editForm.attrs=data.attrs
          this.goods_id=row.goods_id
        })
      },
      //点击编辑对话框中的确定按钮触发的事件
      submitEdit(){
        console.log(this.editForm);
        this.$refs.editForm.validate(flag=>{
          if(!flag)
          return this.$message.error('请根据提示输入正确的内容')
          editGoodsByAxios(this.editForm,this.goods_id).then(res=>{
            console.log(res);
            const{meta}=res.data
            if(meta.status!=200)
            return this.$message.error('修改商品信息失败')
            this.$message.success('修改商品信息成功')
            this.showEditDialogVisible=false
            this.getGoodsList()
          })
        })
      },
      //重置对话框
      resetEditForm(){
        this.$refs.editForm.resetFields()
      },
      //添加商品
      addGoods(){
             addGoodsByAxios(this.addForm).then(res=>{
               console.log(res);
             })
      }
            }
}
</script>

<style lang='less' scoped>
        .el-table{
            font-size:12px;
            margin-top: 20px;
            margin-bottom: 20px;
            .created-time{
                    white-space: pre !important;
            }
        }
        .el-pagination{
                text-align: center;
        }
</style>